<template>
<div class="connect-detail-wrapper detail content">
    <!-- <Spin size="large" fix v-if="loading"></Spin> 加载动画 -->
    <div class="content-header m-b-10"> <!-- 页头部 -->
        <div>
            <ul class="hearder-state">
                <li class="title"><a @click="toDatasourceIndex">数据源</a><span class="m-l-5">></span></li>
                <li class="">{{ connect.connectName }}</li>
            </ul>
        </div>
    </div>
    <div class="page-content">
        <div class="clearfix detail-header"> <!-- 详情头部 -->
            <div class="operation-text"> <!-- 文本 -->
                <div class="bg-icon" :class="iconClass"><span>{{connect.connectName | abbreviate}}</span></div> <!-- 图标 -->
                <h3>{{connect.connectName}}</h3> <!-- 标题 -->
                <p> <!-- 副标题 -->
                    <span>创建人：{{connect.creator}}</span>
                    <span>创建时间：{{connect.createTime | date}}</span>
                </p>
            </div>
            <div class="operation-area"> <!-- 操作按钮区域 -->
                <!-- <a title="新增流程" @click="onAddFlowClick"><i class="zlstbd-icon-process"/></a> -->
                <!-- <a title="编辑" @click="onEditClick"><i class="zlstbd-icon-edit" /></a> -->
                <!-- <Poptip trigger="hover" placement="bottom-end" ref="poptip">
                    <a title="更多"><i class="zlstbd-icon-more"/></a>
                    <div slot="content" class="poptip-content">
                        <ul>
                            <li>
                                <p @click="disable" v-if="connect.state != 0">禁用</p>
                                <p @click="enable" v-if="connect.state == 0">启用</p>
                            </li>
                            <li v-if="connect.flowList.length == 0">
                                <p @click="deleteProject">删除</p>
                            </li>
                        </ul>
                    </div>
                </Poptip> -->
            </div>
        </div>
        <Tabs :animated="false" value="detail">
            <TabPane label="数据源详情" name="detail" class="tab-content fix-scrollbar">
                <div class="basic-info">
                    <p class="color-gray p-l-15 m-b-10">基本信息</p>
                    <div class="back-white p-l-20 p-t-15 p-b-15">
                        <Row>
                            <Col :span="10">
                                <span class="m-r-10">连接名称</span>
                                <span class="detail-info">{{connect.connectName}}</span>
                            </Col>
                            <Col :span="10">
                                <span class="m-r-10">状态</span>
                                <span class="detail-info">{{connect.status | status}}</span>
                            </Col>
                        </Row>
                        <Row class="m-t-15">
                            <Col :span="10">
                                <span class="m-r-10">连接类型</span>
                                <span class="detail-info">{{connect.connectType}}</span>
                            </Col>
                            <Col :span="10">
                                <span class="m-r-10">连接地址</span>
                                <span class="detail-info">{{connect.connectHost}}:{{connect.connectPort}}</span>
                            </Col>
                        </Row>
                        <Row class="m-t-15">
                            <span class="m-r-10">描述</span>
                            <span class="detail-info">{{connect.itemDesc | text}}</span>
                        </Row>
                    </div>
                </div>
                <div class="content-header m-b-5 m-t-10">
                    <div class="pull-left">
                        <ul class="hearder-state">
                            <li class="title">
                                <p class="color-gray p-l-15">关联数据源</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <Table :columns="tableColumns" :data="datasourceList" stripe :loading="loading"></Table>
                    <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
                    @on-change="onPageNumChange" size="small" show-elevator></Page>
                </div>
            </TabPane>
        </Tabs>
    </div>
</div>
</template>

<script>
import getData      from 'getData'
import util         from 'util'

export default {
    components: {
    },

    computed: {
    },
    data () {
        return {

            loading: true,
            connect: {

            },
            page: {
                total: 0,
                pageSize: 10,
                pageNum: 1
            },
            iconClass: 'back-normal',

            tableColumns: [
                {
                    title: '状态',
                    key: 'status',
                    width: 80,
                    align: 'center',
                    fixed: 'left',
                    render: (h, params) =>{
                        if(params.row.status == 0){
                            return (<i class="round back-disable"></i> )
                        }else if(params.row.status == 1){
                            return (<i class="round back-normal"></i> )
                        }
                    }
                },
                {
                    title: '数据源名称',
                    key: 'datasourceName',
                    fixed: 'left',
                    minWidth: 220,
                    tooltip: true,
                    render: (h, params) =>{
                        var row = params.row;
                        return <a on-click={()=> {this.onDatasourceClick(row)}}>{params.row.datasourceName}</a>
                    }
                },
                {
                    title: '类型',
                    key: 'datasourceType',
                    width: 120
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    width: 180,
                    render: (h, params) => {
                        const temp = util.util.formatDate(params.row.createTime, 3);
                        return (
                            <div>
                            {temp}
                            </div>
                        )
                    }
                },
                {
                    title: '描述',
                    key: 'remark',
                    minWidth: 100,
                    tooltip: true
                }
            ],
            datasourceList: [],
            selectedTable: 'data',
        }
    },

    watch: {
        connect: {
            deep: true,
            handler(val) {
                switch (this.connect.status) {
                    case 0:
                        this.iconClass = 'back-disable';
                        break;
                    case 1:
                        this.iconClass =  'back-normal';
                        break;
                }
            }
        }
    },

    methods: {
        queryDatasource() {
            this.loading = true;
            var reqData = this.page;
            reqData.params = {connectId: this.connect.connectId};
            getData.post('queryDatasourceList', reqData).then(res => {
                this.loading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.datasourceList = res.data.data;
                    this.page.total = res.data.total;
                } else {
                    this.datasourceList = [];
                    this.$Message.error("查询数据源数据失败，请检查网络或联系管理员！");
                    console.error(res);
                }
            })
        },
        toDatasourceIndex() {
            this.$router.push({
                path: '/datasource-connect'
            });
        },
        onPageNumChange(num) {
            this.page.pageNum = num;
            this.queryDatasource();
        },
    },

    mounted() {
        this.connect = this.$route.params;
        this.queryDatasource();
    },

    beforeRouteLeave (to, from, next) {
        this.$destroy();
        next();
    }
}
</script>
